/**
 * Created by DuHuiling on 2017/4/20.
 */
var RingProgress = require('../../../../src/libs/ring-progress');
var HyperLink = require('../../../../src/libs/hyperlink');
var Carousel = require('../../../../src/libs/carousel');
var Tooltip = require('../../../../src/libs/tooltip');

var HotItem = React.createClass({
    getInitialState:function(){
        return {
            data:this.props.data
        }
    },
    render:function(){
        var list = this.state.data.list;

        return(
            <div className="index-project">
                <div className="wrap">
                    <h2 className="index-title"><b></b>推荐项目<b></b></h2>
                    {list.length > 0?
                        <Carousel data={list}>
                            {
                                list.map(function(item,index){
                                    /*按钮样式与文案*/
                                    var status = item.VFinancingStatus, statusType = {};
                                    switch (status){
                                        case 1:
                                            statusType.className = "ucs-btn-confirm";
                                            statusType.text = "立即投资";
                                            break;
                                        case 2:
                                            statusType.className = "ucs-btn-wait";
                                            statusType.text = "预热中";
                                            break;
                                        case 3:
                                            statusType.className = "ucs-btn-full";
                                            statusType.text = "已满标";
                                            break;
                                        case 4:
                                            statusType.className = "ucs-btn-full";
                                            statusType.text = "计息中";
                                            break;
                                        case 5:
                                            statusType.className = "ucs-btn-full";
                                            statusType.text = "还款中";
                                            break;
                                        case 6:
                                            statusType.className = "ucs-btn-full";
                                            statusType.text = "已还款";
                                            break;
                                    }

                                    /*项目规模*/
                                    var total_amount = Number(item.TotalAmount.value);
                                    if(total_amount < 10000){
                                        total_amount = UFormatter.formatMoney(total_amount,2) + '元';
                                    }else{
                                        total_amount = UFormatter.formatMoney(total_amount/10000,2) + '万元';
                                    }

                                    /*活动标志*/
                                    var Aflag_Icon = item.Aflag_Icon.value;
                                    var arr_aflag, resetAflag = [];
                                    if(Aflag_Icon){
                                        arr_aflag = Aflag_Icon.split(',');
                                        for(var i = 0;i < arr_aflag.length;i++){
                                            resetAflag.push(arr_aflag[i].split('|'));
                                        }
                                    }
                                    return (
                                        <li>
                                            <h4>
                                                {item.ProjectName.value?item.ProjectName.value:""}
                                                {item.IsExclusive.value?
                                                    (item.IsExclusivePublic.value?
                                                        <Tooltip className="bg-icon tag tag-zhuang" title="专属项目，需输入项目专属识别码才可投标"></Tooltip> :
                                                        <span className="bg-icon tag tag-zhuang"></span>)
                                                    :""
                                                }
                                                {resetAflag ?
                                                    resetAflag.map(function(v,j){
                                                        var _src = "../content/images/ActImage/"+v[0];
                                                        if(v[1]){
                                                            return <Tooltip title={v[1]} className="tag"><img src={_src}/></Tooltip>
                                                        }else{
                                                            return <span href="javascript:void(0)" className="tag"><img src={_src}/></span>
                                                        }
                                                    }) : ""
                                                }
                                            </h4>
                                            <div className="ring-box">
                                                <RingProgress border="12" radius={100} value={item.Progress.value} color={["#ddd","#ec5e3d","#ec5e3d"]}/>
                                                <div className="rate">
                                                    <p className="num">{item.Interest?item.Interest.value:"--"}<b>%</b></p>
                                                    <p>预期年化收益率</p>
                                                </div>
                                            </div>
                                            <div className="cell-box">
                                                <div className="f-left">
                                                    <span>{total_amount}</span>
                                                    <p>项目规模</p>
                                                </div>
                                                <div className="f-right">
                                                    <span>{item.Duration?item.Duration.value:"--"}天</span>
                                                    <p>投资期限</p>
                                                </div>
                                            </div>
                                            <HyperLink href={item.LinkUrl} className={"ucs-btn "+statusType.className} text={statusType.text}></HyperLink>
                                        </li>
                                    )
                                })
                            }
                        </Carousel> :
                        <div><img src="../content/images/nodata.png" alt="暂无项目"/></div>
                    }
                    {list.length >= 6 ?
                        <HyperLink href={this.props.data.moreUrl} text={<span><i className="iconfont icon-arrow"></i>查看更多项目</span>} className="more-item"/>:""
                    }
                </div>
            </div>
        )
    }
});
module.exports = HotItem;